<template>
  <a-form :form="form" layout="horizontal" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item label="产品号">
          <a-input v-decorator="['code', { initialValue: initialData.code }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="产品名称">
          <a-input v-decorator="['name', { initialValue: initialData.name, rules: [{ required: true, message: '请输入产品名称' }] }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item label="渠道">
          <a-select 
            v-decorator="['platform', { 
              initialValue: initialData.platform, 
              rules: [{ required: true, message: '请选择渠道' }] 
            }]"
            placeholder="请选择渠道"
            :disabled="readOnly"
          >
            <a-select-option value="招商银行">招商银行</a-select-option>
            <a-select-option value="建设银行">建设银行</a-select-option>
            <a-select-option value="平安银行">平安银行</a-select-option>
            <a-select-option value="北京银行">北京银行</a-select-option>
            <a-select-option value="交通银行">交通银行</a-select-option>
            <a-select-option value="网商银行">网商银行</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="发行机构">
          <a-input v-decorator="['issuer', { initialValue: initialData.issuer }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item label="风险等级">
          <a-input v-decorator="['risk', { initialValue: initialData.risk }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="周期">
          <a-input v-decorator="['period', { initialValue: initialData.period }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item label="赎回方式">
          <a-input v-decorator="['redeem', { initialValue: initialData.redeem }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="年化收益率">
          <a-input v-decorator="['rate', { initialValue: initialData.rate }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item label="是否生效">
          <a-switch v-decorator="['isActive', { initialValue: initialData.isActive === undefined ? true : initialData.isActive, valuePropName: 'checked' }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="是否关注">
          <a-switch v-decorator="['isFollowed', { initialValue: initialData.isFollowed, valuePropName: 'checked' }]" :disabled="readOnly" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import moment from 'moment';

export default {
  name: 'ProductForm',
  props: {
    initialData: {
      type: Object,
      default: () => ({
        isActive: true
      })
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  watch: {
    initialData: {
      handler(val) {
        if (val && Object.keys(val).length > 0) {
          this.$nextTick(() => {
            this.setFieldsValue(val);
          });
        }
      },
      immediate: true
    }
  },
  methods: {
    validate(cb) {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 格式化日期
          values.date = values.date ? values.date.format('YYYY-MM-DD') : '';
        }
        cb(err, values);
      });
    },
    getFieldsValue() {
      return this.form.getFieldsValue();
    },
    resetFields() {
      this.form.resetFields();
    },
    setFieldsValue(data) {
      console.log('设置表单字段值:', data);
      // 确保日期字段是 moment 对象
      const formData = { ...data };
      if (formData.date && !moment.isMoment(formData.date)) {
        formData.date = moment(formData.date);
      }
      this.form.setFieldsValue(formData);
    }
  }
};
</script>

<style lang="less" scoped>

</style> 